<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" user-scalable=no" >
    <title>商品列表</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/ztree/css/metroStyle/metroStyle.css"/>
    <script src="/ztree/js/jquery.ztree.all.min.js"></script>
    <link rel="stylesheet" href="/css/MicroCircle/addMicroCircle.css"/>
</head>
<style>
    body{
        /*background-color: #C1C1C1;*/
    }
</style>
<body>
<div class="bodyBox">
    <div class="layui-row">
        <div class="layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    添加微圈
                    <div class="btnRight" style="margin-bottom: 10px">
                        <button onclick="backOff()" type="button" class="layui-btn layui-btn layui-btn-sm">
                            <i class="layui-icon layui-icon-return"></i>
                            返回
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="width: 700px; height: 1500px; margin-top: 50px; margin: 0 auto;">
        <div class="layui-form" lay-filter="layForm" style="width: 700px;">
            <div class="layui-form-item layui-row">
                <label class="layui-form-label">文章标题：</label>
                <div class="layui-input-inline">
                    <input name="artcleTitle" class="layui-input" type="text" placeholder="文章标题" />
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <label class="layui-form-label">内容类型：</label>
                <div class="layui-input-inline">
                    <input name="acticleCategroyId" class="layui-input" type="text" placeholder="内容类型" style="display: none;"/>
                    <input name="microcircleId" class="layui-input" type="text" style="display: none;"/>
                    <input name="artcleCategroyName" class="layui-input" type="text" placeholder="内容类型" readonly="readonly"/>
                </div>
                <!--选择微圈文章分类-->
                <div>
                    <i class="layui-icon layui-icon-layer" style="font-size: 30px; float: right; padding-right: 175px;" onclick="ArticleClassification()"></i>
                </div>
            </div>
            <div class="layui-form-item">
                <input type="text" id="img_address" name="artcleUrl" style="display: none;" class="layui-input">
            </div>
            <div class="layui-form-item layui-row">
                <textarea name="article" lay-verify="area" id="area" style="display: none;width: 675px; height: 300px; margin-left: 23px;"></textarea>
            </div>
            <div  style="float: right;">
                <input type="button" class="layui-btn" onclick="draft()" value="保存草稿" />
                <input type="button" class="layui-btn" onclick="release()" value="发布文章"/>
            </div>
        </div>
    </div>
</div>
    <!--<script src="/js/MicroCircle/addMicroCircle.js"></script>-->
    <script>
        var form;
        var $;
        var table;
        var layer;
        var upload;
        var node;
        var layedit;
        var user = JSON.parse(localStorage.getItem("user"));
        var userId = user.userId;
        var draftMicrocircle;
        var layeditIndex;
        var artcleUrl;
        var microcircleId;
        var article;

        $(document).click(function(){//子页面
            $(".rightmenu",window.parent.document).hide();
        });

        layui.use(['form','jquery','table','layer','upload','layedit'],function() {
            form = layui.form;
            $ = layui.jquery;
            table = layui.table;
            layer = layui.layer;
            upload = layui.upload;
            layedit = layui.layedit;

            //富文本编辑器上传图片
            layedit.set({
                uploadImage: {
                    url: '/microcircle/upload', //接口url
                    type: 'post' //默认post
                }
            });

            layeditIndex = layedit.build("area",{
                height:300
            });

            //默认展示草稿
            showDraf(2);

            //选择文章分类
            ArticleClassification = function ArticleClassification() {
                layer.open({
                    type:2,
                    title:"文章分类",
                    area:["500px","300px"],
                    content:"/MicroCircle/article-classification.html",
                });
            }
        });


        function showDraf(details){
            $.ajax({
                url:'/microcircle/getDraftMicrocircle',
                type: "post",
                dataType:'json',
                data: {"details": details},
                success:function (data) {
                    draftMicrocircle = data.data;
                    if (data.data != null){
                        $("input[name=artcleTitle]").val(data.data.artcleTitle);
                        $("input[name=artcleCategroyName]").val(data.data.artcleCategroyName);
                        $("input[name=acticleCategroyId]").val(data.data.acticleCategroyId);
                        $("input[name=artcleUrl]").val(data.data.artcleUrl);
                        $("input[name=microcircleId]").val(data.data.microcircleId);
                        //为富文本编辑器赋值
                        layedit.setContent(layeditIndex, data.data.article, false);
                    }else{
                        $("input[name=artcleTitle]").val('');
                        $("input[name=artcleCategroyName]").val('');
                        $("input[name=acticleCategroyId]").val('');
                        $("input[name=artcleUrl]").val('');
                        $("input[name=microcircleId]").val('');
                        layedit.setContent(layeditIndex, '', false);
                    }
                }
            });
        }

        //保存草稿
        draft = function draft(){
            var artcleTitle = $("input[name=artcleTitle]").val();
            var acticleCategroyId = $("input[name=acticleCategroyId]").val();
            if (draftMicrocircle != null){
                var microcircleId = draftMicrocircle.microcircleId;
            }

            article = layedit.getContent(layeditIndex);
            var article2 = layedit.getContent(layeditIndex);
            var strStart = article2.indexOf('"') + 1;
            var strEnd = article2.indexOf("alt") - 2;
            var artcleUrl = article2.substring(strStart,strEnd);

            var data = {
                userId: userId,
                artcleTitle: artcleTitle,
                acticleCategroyId: acticleCategroyId,
                microcircleId: microcircleId,
                article: article,
                artcleUrl: artcleUrl,
                updateId: userId,
            };
            //保存草稿（有草稿时修改）
            if (draftMicrocircle != null){
                $.ajax({
                    url: "/microcircle/upDraftMicrocircle",
                    type: "post",
                    dataType: "json",
                    data: data,
                    success: function (data) {
                        if (data.data){
                            showDraf(2);
                            //addLog(3,2,'添加微圈');
                            layer.msg("保存成功");
                        }
                    }
                });
            }else{
                //无草稿时添加
                if (acticleCategroyId != '' && artcleTitle != '' && article != '') {
                    $.ajax({
                        url: "/microcircle/addDraftMirList",
                        type: "post",
                        dataType: "json",
                        data: data,
                        success: function (data) {
                            microcircleId = data.data.microcircleId;
                            if (data.data){
                                showDraf(2);
                                //addLog(3,2,'添加微圈');
                                layer.msg("保存成功");
                            }
                        }
                    });
                }else {
                    layer.msg("请补充信息");
                }

            }
        }
        //发布文章
        release = function release() {
            var at = $("input[name=artcleTitle]").val();
            var an = $("input[name=artcleCategroyName]").val();
            var ac = layedit.getContent(layeditIndex);
            if (at != '' && an != '' && ac != ''){
                var artcleUrl = $("input[name=artcleUrl]").val();
                var microcircleId = $("input[name=microcircleId]").val();
                if (draftMicrocircle != null){
                    var data = {
                        productId: microcircleId,
                        //microcircleImgUrl: draftMicrocircle.artcleUrl,
                        microcircleImgUrl: artcleUrl,
                        microcircleImgType: 3,
                        createId: userId,
                    }
                    //添加微圈图片表
                    $.ajax({
                        url: "/microcircle/addMirImg",
                        type: "post",
                        dataType: "json",
                        data: data,
                        success: function (data) {
                            if (data.data){
                                showDraf(2);
                                //addLog(3,2,'添加微圈');
                                layer.msg("发布成功");
                            }
                        }
                    });
                }else{
                    var artcleTitle = $("input[name=artcleTitle]").val();
                    var acticleCategroyId = $("input[name=acticleCategroyId]").val();
                    if (draftMicrocircle != null){
                        var microcircleId = draftMicrocircle.microcircleId;
                    }
                    var article = layedit.getContent(layeditIndex);
                    var artcleUrl = $("input[name=artcleUrl]").val();
                    var data = {
                        userId: userId,
                        artcleTitle: artcleTitle,
                        acticleCategroyId: acticleCategroyId,
                        microcircleId: microcircleId,
                        article: article,
                        artcleUrl: artcleUrl,
                        updateId: userId,
                    };
                    $.ajax({
                        url: "/microcircle/addMirList",
                        type: "post",
                        dataType: "json",
                        data: data,
                        success: function (data) {
                            if (data.data){
                                showDraf(2);
                                //addLog(3,2,'添加微圈');
                                layer.msg("发布成功");
                            }
                        }
                    });

                }
            }else{
                layer.msg("请输入内容");
            }

        }

        //添加操作日志
        function addLog(logType,type,remark) {
            var user = JSON.parse(localStorage.getItem("user"));
            var userId = user.userId;
            $.ajax({
                url: "/microcircle/addLog",
                dataType: "json",
                type: "post",
                data: {"logType":logType,"type":type,"userId":userId,"remark":remark},
                success: function (data) {

                }
            });
        }

        //返回
        function backOff() {
            var arr = localStorage.getItem("numArr");
            var numArr = arr.split(",");
            numArr.pop();
            window.parent.layui.element.tabChange('tab',numArr[numArr.length - 1]);
            localStorage.setItem("numArr",numArr);
        }

    </script>
</body>
</html>